<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">反馈意见</div>
        </div>
        <div class="widget-body  am-fr">
          <div class="am-u-sm-12 am-form">
            <!-- <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                <div class="am-form-group">
                    <el-input v-model="query.username" size="small"   placeholder="请输入账号（登录手机号）"></el-input>
                </div>
            </div> -->
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group">
              <el-date-picker
                v-model="query.feedbackTime"
                type="daterange"
                placeholder="反馈日期">
              </el-date-picker>
            </div>
            <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
                v-model="query.status" placeholder="请选择处理状态">
              <el-option
                v-for="item in processStatuses"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-u-end">
              <div class="am-form-group">
                <button type="button" class="am-btn am-btn-default am-btn-success"
                        @click="handsearch" ><span class="am-icon-search"></span>查询
                </button>
              </div>
            </div>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              stripe
              style="min-width: 100%">
              <!-- <el-table-column
                prop="username"
                label="账号"
                min-width="100">
              </el-table-column> -->
              <el-table-column
                prop="question"
                label="反馈内容"
                min-width="300">
              </el-table-column>
              <el-table-column
                prop="contact"
                label="联系方式"
                min-width="100">
              </el-table-column>
              <el-table-column
                label="反馈时间"
                min-width="160">
                <template scope="scope">
                    <div>
                      {{scope.row.createTime | formatTime}}
                    </div>
                </template>
              </el-table-column>
              <el-table-column
                label="回复时间"
                min-width="160">
                <template scope="scope">
                    <div>
                      {{scope.row.replyTime | formatTime}}
                    </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="operatorName"
                label="回复人"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="replyContent"
                label="回复内容"
                min-width="300">
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                min-width="100">
                <template scope="scope">
                    <div>
                      <el-button size="small" v-if="scope.row.status==0" @click="reply(scope.row)">回复</el-button>
                      <el-button size="small" v-if="scope.row.status==1" :disabled="true">已回复</el-button>
                        <!-- <el-button  size="small" v-if="scope.row.status==0" @click="updateFeedbackStatus(scope.row)">未处理</el-button> -->
                        <!-- <el-button  size="small" v-if="scope.row.status==1" :disabled="true">已处理</el-button> -->
                    </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize"
                        @paging="loadTableData"/>
          </div>
        </div>
      </div>
    </div>
    <feedback-reply ref="feedbackReply" @completed="replyed()"></feedback-reply>
  </div>
</template>
<script>
  import io from '../../lib/io'
  import Pagination from '../base/Pagination.vue'
  import FeedbackReply from './FeedbackReply.vue'
  import moment from 'moment'

  export default{
    data:function(){
      return {
        total: 0,
        pageSize: 10,
        pageNo: 1,
        processStatuses: [
          {label: '请选择处理情况',value: ''},
          {label: '未回复',value: 0},
          {label: '已回复',value: 1},
        ],
        tableData: [],
        query:{
          // username:'',
          status:"",
          feedbackTime:[],
        }
      }
    },
    components: {
       Pagination,
       FeedbackReply
    },
    created(){
      this.loadTableData(1)
    },
    mounted :function(){
      $(window).smoothScroll()
    },
    methods:{
        handsearch(){
          this.loadTableData(1)
        },
        loadTableData(pageNo){
          this.pageNo = pageNo || this.pageNo || 1
          this.$showLoading()
          let param = {
              // username:this.query.username,
              status:this.query.status,
              start:this.query.feedbackTime[0] ? moment(this.query.feedbackTime[0]).format('YYYY-MM-DD') : '',
              end:this.query.feedbackTime[1] ? moment(this.query.feedbackTime[1]).format('YYYY-MM-DD') : '',
          }
          io.post(io.feedbackList, Object.assign({},param, {
              pageNo: this.pageNo,
              pageSize: this.pageSize,
            }), (ret) => {
              this.$hiddenLoading()
              if (ret.success) {
                this.tableData = ret.data.list
                this.total = ret.data.total
              } else {
                this.$alert(ret.desc)
              }
            })
        },
        updateFeedbackStatus(row){
          let _this = this
          let param = {
            outerFeedbackId:row.outerFeedbackId,
            status:1,
          }
          console.log(param)
          _this.$confirm('该学员问题确定已处理？',
          function () {
            io.post(io.updateFeedbackStatus,param, function (ret) {
              if (ret.success) {
                _this.$toast('状态跟新成功')
                _this.loadTableData()
              } else {
                _this.$alert(ret.desc)
              }
            })
          });
        },
        reply(feedback){
          this.$refs.feedbackReply.feedback = feedback
          this.$refs.feedbackReply.query.replyContent = ''
          this.$refs.feedbackReply.show()
          // console.log()
        },
        replyed(){
          this.loadTableData()
        }
    },
  }
</script>
<style lang="less" scoped>

</style>

<style lang="less">
  .am-form input[type=text][readonly] {
    cursor: text;
    background-color: transparent;
  }
</style>
